{extend name="main"}

{block name="button"}
<button data-target-submit class='layui-btn layui-btn-sm'>保存数据</button>
<button data-target-backup class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确认要取消编辑吗？">取消编辑</button>
{/block}

{block name="content"}
<form class='layui-form layui-card' data-auto="true" method="post">
    <div id='PosterForm' class="layui-card-body" style="min-width:1100px">
        <div class="flex">

            <div style="width:504px;height:713px" class="relative notselect shadow overhide">
                <img alt="img" id="ImageTarget" class="full" src="https://dummyimage.com/800x1200/3c9cff/3c9cff" :src="image">
                <div class="absolute-full">
                    <template v-for="x in items" v-if="x.state==1">
                        <div class="absolute nowrap" style="cursor:move" :style="point(x)" @mousedown="move($event,x)">{{x.alias || x.value}}</div>
                    </template>
                </div>
            </div>

            <div class="flex-1 padding-left-30">
                <a class="absolute" style="right:20px;top:20px" @click="show()">预 览</a>

                <label class="layui-form-item block relative">
                    <span class="help-label label-required-prev"><b>推广海报编号</b><code>Code</code></span>
                    <input class="layui-input think-bg-gray" name="code" readonly required placeholder="请输入推广海报编号" value='{$vo.code|default=""}'>
                </label>

                <label class="layui-form-item block relative">
                    <span class="help-label label-required-prev"><b>推广海报标题</b><code>Title</code></span>
                    <input class="layui-input" name="name" required placeholder="请输入推广海报标题" value='{$vo.name|default=""}'>
                </label>

                <div class="layui-form-item block relative">
                    <span class="help-label label-required-prev"><b>授权终端类型</b><code>Device</code></span>
                    <div class="layui-textarea help-checks">
                        {empty name='vo.devices'}{php}$vo['devices']=[];{/php}{/empty}
                        {foreach $devices as $k=>$l}
                        <label class="think-checkbox">
                            {if in_array($k,$vo.devices)}
                            <input type="checkbox" name="devices[]" value="{$k}" lay-ignore checked> {$l.name}
                            {else}
                            <input type="checkbox" name="devices[]" value="{$k}" lay-ignore> {$l.name}
                            {/if}
                        </label>
                        {/foreach}
                    </div>
                </div>

                <div class="layui-form-item block relative">
                    <span class="help-label label-required-prev"><b>授权用户等级</b><code>Level</code></span>
                    <div class="layui-textarea help-checks">
                        {empty name='vo.levels'}{php}$vo['levels']=[];{/php}{/empty}
                        {foreach $levels as $l}
                        <label class="think-checkbox">
                            {if in_array($l.number,$vo.levels)}
                            <input type="checkbox" name="levels[]" value="{$l.number}" lay-ignore checked> {$l.name}
                            {else}
                            <input type="checkbox" name="levels[]" value="{$l.number}" lay-ignore> {$l.name}
                            {/if}
                        </label>
                        {/foreach}
                    </div>
                </div>

                <div class="layui-form-item">
                    <span class="help-label label-required-prev"><b>推广海报底图</b>( 推荐尺寸 1008 x 1426 或相应比例 )</span>
                    <label class="block relative">
                        <input class="layui-input think-bg-gray" readonly v-model="image" name="image">
                        <a class="layui-icon layui-icon-upload input-right-icon" data-file data-field="image" data-type="png,jpg,jpeg"></a>
                    </label>
                </div>

                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4 layui-col-sm6 layui-col-xs6" v-for="(x,k) in items">
                        <span class="help-label label-required-prev"><b>邀请人{{x.name}}</b></span>
                        <div class="layui-textarea">
                            <div class="layui-input-group">
                                <div class="layui-input-prefix nowrap">是否显示</div>
                                <label class="think-radio"><input type="radio" v-model="x.state" value="1" lay-ignore> 是</label>
                                <label class="think-radio"><input type="radio" v-model="x.state" value="0" lay-ignore> 否</label>
                            </div>
                            <div v-if="x.type==='ximg'" class="layui-input-group ta-mt-10">
                                <div class="layui-input-prefix nowrap">图片尺寸</div>
                                <label><input type="number" v-model="x.size" min="12" max="200" value="12" class="layui-input ta-pr-0"></label>
                                <div class="layui-input-suffix">px</div>
                            </div>
                            <div v-if="x.type=='text'" class="layui-input-group ta-mt-10">
                                <div class="layui-input-prefix nowrap">文字大小</div>
                                <label><input type="number" v-model="x.size" min="12" max="99" value="12" class="layui-input ta-pr-0"></label>
                                <div class="layui-input-suffix"><span :data-color-picker="k" class="margin-0"></span></div>
                            </div>
                            <div v-if="x.rule=='item.value'" class="layui-input-group ta-mt-10">
                                <div class="layui-input-prefix nowrap">文字内容</div>
                                <label class="block">
                                    <input class="layui-input" placeholder="请输入文字内容" v-model="x.value">
                                </label>
                            </div>
                            <div v-if="x.rule=='user.spreat'" class="layui-input-group ta-mt-10">
                                <div class="layui-input-prefix nowrap">入口链接</div>
                                <label class="block">
                                    <input class="layui-input" placeholder="请输入入口链接" v-model="x.value">
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <label class="layui-form-item layui-hide relative">
            <textarea class="layui-textarea" readonly name="content">{{JSON.stringify(items)}}</textarea>
            <textarea class="layui-textarea" readonly id="EditValue">{$vo.content|default=[]|json_encode}</textarea>
        </label>

        <div class="hr-line-dashed margin-top-40"></div>
        {notempty name='vo.id'}<input name="id" type="hidden" value="{$vo.id}">{/notempty}

        <div class="layui-form-item text-center">
            <button class="layui-btn" type='submit'>保存数据</button>
            <button class="layui-btn layui-btn-danger" type='button' data-confirm="确认要取消编辑吗？" data-target-backup>取消编辑</button>
        </div>
    </div>
</form>

<script>
    // 加载插件并显示界面
    require(['vue'], function (vue) {
        new vue({
            el: '#PosterForm', data: {
                id: parseInt("{$vo.id|default=0}"),
                image: '{$vo.image|default="https://fakeimg.pl/10x10/16baaa/16baaa"}',
                imageBox: {w: 504, h: 713}, items: [
                    {type: 'ximg', name: '用户头像', rule: 'user.headimg', value: '', size: 100, state: 1, point: {x: 30, y: 80}, color: 'rgba(51,51,51,1)'},
                    {type: 'text', name: '用户昵称', rule: 'user.nickname', value: '用户昵称', size: 14, state: 1, point: {x: 55, y: 82}, color: 'rgba(51,51,51,1)'},
                    {type: 'text', name: '等级身份', rule: 'user.rolename', value: '推广专员', size: 14, state: 1, point: {x: 55, y: 88}, color: 'rgba(51,51,51,1)'},
                    {type: 'ximg', name: '邀请二维码', rule: 'user.spreat', value: '/pages/home/index', size: 100, state: 1, point: {x: 70, y: 80}, color: 'rgba(51,51,51,1)'},
                    {type: 'text', name: '推广短语', rule: 'item.value', value: '推广短语', size: 14, state: 1, point: {x: 30, y: 75}, color: 'rgba(51,51,51,1)'},
                ]
            }, methods: {
                point(data) {
                    let style = {};
                    if (data.type === 'ximg') {
                        data.alias = data.name;
                        style.color = 'rgba(255,255,255,0.6)'
                        style.width = data.size + 'px';
                        style.height = data.size + 'px';
                        style.border = '1px solid #fff';
                        style.borderRadius = '5px';
                        style.background = 'rgba(0,0,0,0.3)';
                        style.textAlign = 'center';
                        style.lineHeight = data.size + 'px';
                    } else {
                        style.color = data.color;
                        style.fontSize = data.size + 'px';
                    }
                    return Object.assign(style, {top: data.point.y + '%', left: data.point.x + '%', fontWeight: 700});
                },
                show: function () {
                    let data = {image: this.image, items: JSON.stringify(this.items)};
                    $.form.load('{:sysuri("show")}', data, 'post', function (ret) {
                        if (ret.code > 0 && ret.data.base64) {
                            return $.previewImage(ret.data.base64, '650px'), false;
                        }
                    });
                },
                move(evt, data) {
                    let that = this, odiv = evt.target, disY, disX;
                    // 计算鼠标相对元素的位置
                    disY = evt.clientY - odiv.offsetTop;
                    disX = evt.clientX - odiv.offsetLeft;
                    document.onmousemove = function (e) {
                        // 计算元素相对位置
                        let top = e.clientY - disY, left = e.clientX - disX;
                        if (top < 0 || left < 0 || top > that.imageBox.h - odiv.offsetHeight || left > that.imageBox.w - odiv.offsetWidth) return;
                        // 写入更新定位坐标
                        data.point.y = top / that.imageBox.h * 100;
                        data.point.x = left / that.imageBox.w * 100;

                    };
                    document.onmouseup = function () {
                        document.onmouseup = null;
                        document.onmousemove = null;
                    };
                }
            }, mounted: function () {
                let that = this;
                // 文件上传成功处理
                $('[data-file]').on('upload.done', function (evt, data) {
                    that.image = data.file.xurl;
                });
                // 初始化颜色选择器
                $('[data-color-picker]').map(function (idx, elem) {
                    elem.ky = elem.dataset.colorPicker, elem.id = 'color_' + elem.ky;
                    layui.colorpicker.render({
                        size: 'md', alpha: true, format: 'rgb', predefine: true,
                        elem: '#color_' + elem.ky, color: that.items[elem.ky].color,
                        change: function (color) {
                            that.items[elem.ky].color = color;
                        }
                    });
                });
            }, created: function () {
                if (this.id > 0) {
                    this.items = JSON.parse($('#EditValue').val());
                }
            }
        });
    });
</script>
{/block}